<template>
  <div class="editor-panel">
    <back-button @click="backAction" />
    <div class="editor-panel-content">
      <scene-layout ref="canvas" />

      <!-- 工具栏 -->
      <editor-toolbar :current-tool="currentTool" :current-color="currentColor" @tool-change="handleToolChange"
        @color-change="handleColorChange" />

      <!-- 节点树 -->
      <node-tree :node-list="currentTree" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import backButton from '@/common/components/back-button.vue'

import SceneLayout from '../game/components/sceneLayout/editorLayout.vue'
import EditorToolbar from './editorToolbar.vue'
import NodeTree from './nodeTree.vue'

const router = useRouter()
const backAction = () => {
  router.back()
}

// 改为响应式变量
const canvas = ref()
const currentTool = ref('select')
const currentColor = ref('#ff0000') // 初始颜色
const currentTree = ref([]) // 初始目录


const handleToolChange = (type: string) => {
  currentTool.value = type
  console.log("handleToolChange", canvas.value)
  canvas.value.setCurrentTool(type)
}

// 颜色修改保持原有逻辑
const handleColorChange = (color: string) => {
  currentColor.value = color
  canvas.value.setCurrentColor(color)
}
</script>

<style lang="scss">
.editor-panel {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;

  .editor-panel-content {
    height: 100%;
    width: 100%;
  }


}
</style>
